<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div id="organ_number" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped>

</style>

<script setup lang="ts" name="profileOrganPopulationIndex">
import * as echarts from 'echarts'
import { ref } from 'vue'

const title=ref('各部门员工人数')
const option = {
	color: '#ff6633',
	barWidth: '40%',
	title: {
		left: '32px',
		text: ' ',
		subtext: '单位（人）',
		subtextStyle: {
			height: 20
		}
	},
	tooltip: {},
	legend: {},
	xAxis: {
		data: ['设计部', '研发部', '商务部', '渠道部', '产品部', '行政部', '人事部', '财务部', '安保部', '后勤部', '策划部', '技术部', '运维部']
	},
	yAxis: {},
	series: [
		{
			type: 'bar',
			data: [110, 580, 430, 280, 110, 430, 530, 280, 110, 215, 245, 475, 185],
			itemStyle: {
				borderRadius: [4, 4, 0, 0]
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#00000066'
				}
			}
		}
	]
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById('organ_number'))
	chart.setOption(option)
}, 500)
</script>
